<template>
    <div>
        <div>
            <el-button type="primary" size="small" class="mb20" @click="dialogCreateVisible = true">新增管理员</el-button>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="账号"></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="createTime" label="加入时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row, $index}">
                        <el-button v-if="row.name != 'admin'" type="text" @click="removeAdmin(row.id, $index, row.name)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="新增管理员" :visible.sync="dialogCreateVisible" width="400px">
                <el-form :model="form" ref="adminForm" :rules="rules" label-width="60px" size="small" style="width:100%;">
                    <el-form-item label="账号" required prop="name">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" required prop="password">
                        <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" required prop="nickname">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogCreateVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createAdmin">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { getAllAdmin, addAdmin, deleteAdmin } from '@/api'
    export default {
        data() {
            return {
                tableData: [],
                dialogCreateVisible: false,
                form: {
                    name: '',
                    password: '',
                    nickname: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入账号'},
                        {min: 4, max: 20, message: '长度在 4 到 20 个字符'},
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符'},
                    ],
                    password: [
                        {required: true, message: '请输入密码'},
                        {min: 6, max: 20, message: '长度在 6 到 20 个字符'},
                    ]
                }
            }
        },
        created(){
            this.queryAdmin()
        },
        methods: {
            queryAdmin(){
                getAllAdmin().then(res => {
                    this.tableData = res.data.result
                })
            },
            removeAdmin(id, index, name) {
                if(name === 'admin'){
                    this.$message.error('admin账户不能删除')
                    return false
                }
                this.$confirm('确定要删除此管理员账号？', '提示', {
                    type: 'warning'
                }).then(() => {
                    deleteAdmin({id}).then(()=>{
                        this.$message.success('删除成功')
                        this.tableData.splice(index,1)
                    })
                })
                
            },
            createAdmin(){
                this.$refs.adminForm.validate((valid) => {
                    if (valid) {
                        this.dialogCreateVisible = false
                        addAdmin(this.form).then( () => {
                            this.$message.success('添加成功')
                            this.queryAdmin()
                            this.form = {
                                name: '',
                                password: '',
                                nickname: ''
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">

</style>